<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-04-06 17:17:24
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-04-12 11:41:47
 * @Description:
 *
-->

<template>
  <div class="top5-usage-ctn">
    <div class="title">
      Top5-{{ type === "cpu" ? "CPU" : "内存" }}使用率（实时）
    </div>
    <div class="content">
      <el-select
        v-model="type"
        popper-class="select-popper"
        :popper-append-to-body="false"
        class="select"
        placeholder="请选择"
        size="mini"
        @change="typeChange"
      >
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <div class="top5">
        <div
          v-for="(item, index) in top5Usage"
          :key="index"
          class="item"
          @click="itemClick(index)"
        >
          <div class="order" :style="{ background: ORDER_COLORS[index % 5] }">
            {{ index + 1 }}
          </div>
          <div class="name">{{ item.key }}</div>
          <div class="percent">{{ item.val }}{{ item.unit }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMonitorTop } from '@/api/situation'

export default {
  name: 'Top5Usage',
  props: {},
  data() {
    return {
      typeOptions: [
        {
          value: 'cpu',
          label: 'CPU'
        },
        {
          value: 'mem',
          label: '内存'
        }
      ],
      ORDER_COLORS: ['#6DD400', '#F7B500', '#F7CE00', '#597BB6', '#597BB6'],
      type: 'cpu',
      top5Usage: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getTop5Data()
  },
  mounted() {},
  methods: {
    /**
     * @description: 点击
     * @param {*} index
     * @return {*}
     */
    itemClick(index) {
      this.$router.push({
        path: '/monitor/cn-resource/detail',
        query: {
          activeTab: 'DetailTop5'
        }
      })
    },
    /**
     * @description: 类别切换
     * @param {*} val
     * @return {*}
     */
    typeChange(val) {
      this.getTop5Data()
    },
    /**
     * @description:
     * @return {*}
     */
    getTop5Data() {
      getMonitorTop({
        cloudProvider: '阿里云',
        cloudAccountName: '',
        showChart: false,
        topic: this.type
      }).then((res) => {
        if (
          Array.isArray(res.data.listViews) &&
          res.data.listViews.length > 0 &&
          Array.isArray(res.data.listViews[0].items)
        ) {
          this.top5Usage = res.data.listViews[0].items
        } else {
          this.top5Usage = []
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.top5-usage-ctn {
  width: 494px;

  .title {
    width: 494px;
    height: 28px;
    line-height: 28px;
    background: url("~@/assets/imgs/situation/bg_title_normal.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-left: 25px;
    .textStyle(16px , 600, #03d3ff);
  }

  .content {
    margin-top: 10px;
    box-sizing: border-box;
    padding: 10px 20px 0;
    height: 234px;
    background: linear-gradient(
      351deg,
      rgba(32, 56, 80, 0.37) 0%,
      rgba(19, 61, 91, 0.35) 100%
    );

    .select {
      width: 65px;
      height: 20px;
      box-sizing: border-box;
      background: rgba(3, 141, 255, 0.4);
      box-shadow: 0px 0px 4px 0px rgba(67, 227, 225, 0.3);
      border-radius: 1px;
      border: 1px solid #0399ff;

      /deep/ .el-input__inner {
        height: 20px;
        line-height: 20px;
        background-color: transparent;
        border: none;
        padding: 0 10px;
        .textStyle(12px, 500, #03b2ff);

        &::placeholder {
          .textStyle(12px, 400, #168bd3);
          line-height: normal;
        }
      }

      /deep/ .el-input__icon {
        line-height: 20px;
      }

      /deep/ .el-select__caret {
        color: #03b2ff;
        font-size: 12px;
      }

      /deep/ .select-popper {
        background: rgba(34, 97, 152, 0.9);
        border: 1px solid rgba(34, 97, 152, 0.6);
        top: auto !important;
        left: auto !important;
        width: 70px;
        box-sizing: border-box;

        .popper__arrow {
          border-bottom-color: rgba(82, 191, 255, 0.1);

          &::after {
            border-bottom-color: rgba(82, 191, 255, 0.1);
          }
        }

        li {
          height: 28px;
          line-height: 28px;
          .textStyle(12px, 400, #52bfff);

          &.selected {
            background: rgba(82, 191, 255, 0.35);
          }

          &.hover {
            background: rgba(82, 191, 255, 0.35);
          }
        }
      }
    }

    .top5 {
      margin-top: 16px;
      height: 170px;
      overflow-y: auto;

      .item {
        cursor: pointer;
        display: flex;
        align-items: center;
        height: 34px;
        box-sizing: border-box;
        padding: 0 20px;

        &:nth-child(odd) {
          background: rgba(34, 97, 152, 0.3);
        }

        .order {
          width: 19px;
          height: 19px;
          line-height: 19px;
          text-align: center;
          border-radius: 50%;
          .textStyle(14px , 500, #133a5e);
          background: #6dd400;
        }

        .name {
          width: 200px;
          margin-left: 80px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .textStyle(14px , 500, #B0CFE8);
        }

        .percent {
          .textStyle(14px , 500, #B0CFE8);
          margin-left: auto;
        }
      }
    }
  }
}
</style>
